<template>
    <div class='rank-container'>
        <div class="rank-container-top">
            <div class="rank-container-top-box">
                <div class="rank-container-top-box-select">
                    <div v-for="item in timeOption" :key="`time-${item.id}`" @click="changeSelect(item.label)"
                        :class="current === item.label ? 'rank-container-top-box-select-item-s' : 'rank-container-top-box-select-item'">
                        {{ item.label }}</div>
                </div>
                <div class="rank-container-top-box-rank">
                    <div class="rank-container-top-box-rank-item">
                        <div class="rank-container-top-box-rank-item-avr">
                            <div class="rank-container-top-box-rank-item-avr-img" style="background-color: #f5f5f5;">
                                <img v-if="!setRankData()[1].avr" src="@/assets/avr.jpg" alt="">
                                <img v-if="setRankData()[1].avr" :src="setRankData()[1].avr" alt="">
                            </div>
                            <div class="rank-container-top-box-rank-item-avr-icon" style="background-color: #f5f5f5;">
                                <img src="@/assets/icon/t3.png" alt="">
                            </div>
                        </div>
                        <div class="rank-container-top-box-rank-item-area">
                            <span class="rank-container-top-box-rank-item-area-name">{{ setRankData()[1].nickName }}</span>
                            <span class="rank-container-top-box-rank-item-area-income">{{ '￥' +
                                setRankData()[1].income }}</span>
                        </div>
                    </div>
                    <div class="rank-container-top-box-rank-item">
                        <div class="rank-container-top-box-rank-item-avr-2">
                            <div class="rank-container-top-box-rank-item-avr-2-img" style="background-color: #FACC15;">
                                <img v-if="!setRankData()[0].avr" src="@/assets/avr.jpg" alt="">
                                <img v-if="setRankData()[0].avr" :src="setRankData()[0].avr" alt="">
                            </div>
                            <div class="rank-container-top-box-rank-item-avr-2-icon" style="background-color: #FACC15;">
                                <img src="@/assets/icon/t2.png" alt="">
                            </div>
                        </div>
                        <div class="rank-container-top-box-rank-item-area">
                            <span class="rank-container-top-box-rank-item-area-name">{{ setRankData()[0].nickName }}</span>
                            <span class="rank-container-top-box-rank-item-area-income">{{ '￥' +
                                setRankData()[0].income }}</span>
                        </div>
                    </div>
                    <div class="rank-container-top-box-rank-item">
                        <div class="rank-container-top-box-rank-item-avr">
                            <div class="rank-container-top-box-rank-item-avr-img" style="background-color: #999;">
                                <img v-if="!setRankData()[2].avr" src="@/assets/avr.jpg" alt="">
                                <img v-if="setRankData()[2].avr" :src="setRankData()[2].avr" alt="">
                            </div>
                            <div class="rank-container-top-box-rank-item-avr-icon" style="background-color: #999;">
                                <img src="@/assets/icon/t2.png" alt="">
                            </div>
                        </div>
                        <div class="rank-container-top-box-rank-item-area">
                            <span class="rank-container-top-box-rank-item-area-name">{{ setRankData()[2].nickName }}</span>
                            <span class="rank-container-top-box-rank-item-area-income">{{ '￥' +
                                setRankData()[2].income }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="rank-container-bottom">
            <van-empty v-if="setRankData().length < 4" image="search" description="暂无更多数据" />
            <div v-if="setRankData().length > 4" class="rank-container-bottom-item" v-for="(item, index) in setRankData()"
                :key="index">
                <div class="rank-container-bottom-item-left">{{ index + 1 }}</div>
                <div class="rank-container-bottom-item-middle">
                    <img v-if="item.avr" :src="item.avr" alt="">
                    <img v-if="!item.avr" src="@/assets/avr.jpg" alt="">
                    <div class="rank-container-bottom-item-middle-label">
                        <div class="rank-container-bottom-item-middle-label-name">{{ item.nickName }}</div>
                        <div class="rank-container-bottom-item-middle-label-count">{{ '接单数: ' + item.completed }}</div>
                    </div>
                </div>
                <div class="rank-container-bottom-item-right">{{ '￥' + item.income }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import orderApi from '@/plugins/api/order'
import dealApi from '@/plugins/api/deal'
import userApi from '@/plugins/api/user'
import { fuzzyMatch } from '@/plugins/utils/filterArray'
import { getToday, getThisWeek, getThisMonth, getThisYear } from '@/plugins/utils/timeUtils'


export default {
    name: 'Rank',
    data() {
        return {
            orders: [],
            users: [],
            timeOption: [
                {
                    id: 1,
                    label: '日榜',
                    time: getToday()
                },
                {
                    id: 2,
                    label: '周榜',
                    time: getThisWeek()
                },

                {
                    id: 3,
                    label: '月榜',
                    time: getThisMonth()
                },
                {
                    id: 4,
                    label: '年榜',
                    time: getThisYear()
                },
            ],
            current: '日榜',
            rankingData: [
            ],
            deals: []
        }
    },
    mounted() {
        this.getOrder()
        this.getUser()
        this.getDeals()
    },
    methods: {
        changeSelect(label) {
            this.current = label
        },
        async getOrder() {
            const res = await orderApi.list()
            if (res.code === 200) {
                this.orders = res.data
            }
        },
        async getUser(type) {
            const res = await userApi.all()
            if (res.code === 200) {
                this.users = res.data
            }
        },

        async getDeals() {
            const res = await dealApi.list()
            if (res.code === 200) {
                this.deals = res.data
            }
        },
        matchOrderByTime() {
            const select = this.timeOption.find(item => item.label === this.current)
            const orderByTime = this.orders.filter(item => new Date(item.jiesuanTime).getTime() >= select.time.start && new Date(item.jiesuanTime).getTime() <= select.time.end)
            return orderByTime
        },

        matchWanchengOrderByTime() {
            const select = this.timeOption.find(item => item.label === this.current)
            const orderByTime = this.orders.filter(item => item.wanchengTime && new Date(item.wanchengTime).getTime() >= select.time.start && new Date(item.wanchengTime).getTime() <= select.time.end)
            return orderByTime
        },
        matchdealsByTime() {
            const select = this.timeOption.find(item => item.label === this.current)
            const dealsByTime = this.deals.filter(item => item.jiesuanTime && new Date(item.jiesuanTime).getTime() >= select.time.start && new Date(item.jiesuanTime).getTime() <= select.time.end)
            return dealsByTime
        },

        matchUser(role) {
            return fuzzyMatch(this.users, { role })
        },

        setRankData() {
            const players = this.matchUser(2)
            const orders = this.matchOrderByTime()
            const deals = this.matchdealsByTime()
            for (let index = 0; index < players.length; index++) {
                const user = players[index]
                const orderByUser = orders.filter(order => {
                    const ids = order.playerId.split(',').map(id => id.trim());
                    return ids.includes(user.id.toString());
                })
                user.completed = orderByUser.length || 0
                user.income = 0
                const dealsByUser = deals.filter(item => item.userId === user.id && item.type === 2)
                if (dealsByUser.length) {
                    for (let j = 0; j < dealsByUser.length; j++) {
                        user.income = Number(user.income) + Number(dealsByUser[j].value)
                    }
                }
            }
            return players.sort((a, b) => Number(b.income) - Number(a.income))
        },

        refreshRanking() {
            this.$message({
                message: '排行榜数据已刷新',
                type: 'success'
            })
            // 这里可以添加实际刷新数据的逻辑
        },
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex === 0) {
                return 'first-row'
            } else if (rowIndex === 1) {
                return 'second-row'
            } else if (rowIndex === 2) {
                return 'third-row'
            }
            return ''
        }

    }
}
</script>

<style lang='scss' scoped>
@import '../assets/global/mixin.scss';

.rank-container {
    width: 100%;
    height: 100%;

    &-top {
        padding-top: 10px;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        background-color: white;

        &-box {
            width: 100%;

            &-select {
                width: 100%;
                height: 60px;
                @include flex(row, flex-start, center);
                border-bottom: 1px solid #ccc;

                &-item,
                &-item-s {
                    flex: 0 0 65px;
                    height: 32px;
                    @include flex(row, center, center);
                    font-size: 14px;
                    background-color: #f5f5f5;
                    color: #666;
                    border-radius: 5px;
                    margin-right: 10px;
                }

                &-item-s {
                    background-color: #1989fa;
                    color: #fff;
                }
            }

            &-rank {
                width: 100%;
                height: 150px;
                @include flex(row, space-between, flex-end);

                &-item {
                    flex: 0 0 33%;
                    // background-color: red;
                    @include flex(column, flex-end, center);

                    &-avr {
                        width: 52px;
                        flex: 0 0 52px;
                        position: relative;

                        &-icon {
                            position: absolute;
                            width: 21px;
                            height: 21px;
                            border-radius: 21px;
                            top: -5px;
                            right: -5px;
                            @include flex(row, center, center);

                            img {
                                width: 60%;
                            }
                        }

                        &-img {
                            width: 100%;
                            height: 100%;
                            border-radius: 100%;
                            overflow: hidden;
                            @include flex(row, center, center);

                            img {
                                width: 48px;
                                border-radius: 48px;
                            }

                        }
                    }

                    &-avr-2 {
                        width: 66px;
                        flex: 0 0 66px;
                        position: relative;

                        &-icon {
                            position: absolute;
                            width: 21px;
                            height: 21px;
                            border-radius: 21px;
                            top: -3px;
                            right: -3px;
                            @include flex(row, center, center);

                            img {
                                width: 60%;
                            }
                        }

                        &-img {
                            width: 100%;
                            height: 100%;
                            border-radius: 100%;
                            overflow: hidden;
                            @include flex(row, center, center);

                            img {
                                width: 62px;
                                border-radius: 62px;
                            }

                        }
                    }

                    &-area {
                        @include flex(column, flex-end, center);

                        &-name {
                            font-size: 14px;
                            color: #666;
                            margin-top: 10px;
                        }

                        &-income {
                            font-size: 12px;
                            color: #ccc;
                            margin-top: 5px;
                        }
                    }
                }
            }
        }
    }

    &-bottom {
        padding: 10px 15px;

        &-item {
            padding: 20px;
            border-radius: 5px;
            background-color: #fff;
            margin-bottom: 10px;
            @include flex(row, space-between, center);

            &-left {
                flex: 0 0 30px;
                font-size: 16px;
                // text-align: center;
                // background-color: red;
                // margin: 0 20px;
            }

            &-middle {
                flex: 1;
                @include flex(row, flex-start, space-between);

                img {
                    width: 42px;
                    height: 42px;
                    border-radius: 42px;
                }

                &-label {
                    margin: 0 5px 0 10px;

                    &-name {
                        font-size: 16px;
                        font-weight: 600;
                        margin-bottom: 10px;
                    }

                    &-count {
                        font-size: 12px;
                        color: #999;
                    }
                }
            }

            &-right {
                font-size: 14px;
                font-weight: 600;
            }
        }
    }
}
</style>